<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="">
			省份:<select name="" id="provinceid" onchange="changeProvince();">
				<option value="-1">请选择省份</option>
			</select>
			市区:<select name="" id="cityid" onchange="changeCity()">
				<option value="-1">请选择市区</option>
			</select>
			区县:<select name="" id="countyid" onchange="Countyarrchange()">
				<option value="-1">请选择区县</option>
			</select>
			</br>
			你选择的是:<label id="selectValue"></label>
		</div>
	</body>
	<script type="text/javascript">
		var province=['福建省','浙江省','江西省','四川省','陕西省'];
		var citys=[['福州市','厦门市','龙岩市'],
		['杭州市','温州市','宁波市'],
		['南昌市','九江市','赣州市'],
		['重庆市','成都市','绵阳市'],
		['西安市','宝鸡市','咸阳市']
		];
		var county=
		[['闽清县','台江区','鼓楼区'],
		['思明区','海沧区','湖里区'],
		['新罗区','永定区','长汀县']],
		
		
		
		[['上城区','下城区','余杭区'], 
		['瑞安市','文成县','泰顺县'],
		['海曙区','江北区','宁海县']],
		
		
		
		[['东湖区','西湖区','南昌县'], 
		['德安县','都昌县','湖口县'], 
		['赣县区','南康区','宁都县']], 
		
		
		
		[['万州区','涪陵区','渝中区'], 
		['锦江区','青羊区','金牛区'], 
		['涪城区','游仙区','平武县']], 
		
		
		
		[['新城区','碑林区','临潼区'], 
		['岐山县','陈仓区','陇县'], 
		['秦都区','永寿县','渭城区']], 
		
		
	function changeProvince(){
				var provinceObj = document.getElementById('provinceid');
				var cityObj = document.getElementById('cityid');
				var countyObj = document.getElementById('countyid');
				cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
				if(provinceObj.value==-1){
					return;
				}
				var city = citys[provinceObj.value];			
				for(var i=0;i<city.length;i++){
					cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
				}
			}
			function changeCity(){
				var provinceObj = document.getElementById('provinceid');
				var cityObj = document.getElementById('cityid');
				var countyObj = document.getElementById('countyid');
				var provinceName = provinces[provinceObj.value];
				var cityName = citys[provinceObj.value][cityObj.value];
			
				var selectObj = document.getElementById('selectValue');
				selectObj.innerText = provinceName+": "+cityName;
			}
			function Countyarrchange(){
				var provinceObj = document.getElementById('provinceid');
				var cityObj = document.getElementById('cityid');
				var countyObj = document.getElementById('countyid');
				document.getElementById('selectValue').innerHTML = id.options[provinceObj.selectedIndex].text+'-'+cityObj.options[cityObj.selectedIndex].text
				+'-'+countyObj.options[countyObj.selectedIndex].text;
			}
			onload = function(){
			var provinceObj = document.getElementById('provinceid');
						for(var i=0;i<provinceName.length;i++){
							provinceNameObject.innerHTML+=`<option value="`+i+`">`+provinceName[i]+`</option>`;
				
			}
		
	</script>
</html>
